<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园课程管理系统 - 主界面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Arial', sans-serif;
        }
        .sidebar {
            background-color: #343a40;
            color: white;
            height: 100vh;
            position: fixed;
            width: 250px;
        }
        .sidebar .nav-link {
            color: rgba(255, 255, 255, 0.8);
            padding: 15px;
            transition: all 0.3s;
        }
        .sidebar .nav-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
        }
        .sidebar .nav-link.active {
            background-color: #007bff;
            color: white;
        }
        .main-content {
            margin-left: 250px;
            padding: 20px;
        }
        .card {
            margin-bottom: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .user-info {
            display: flex;
            align-items: center;
            padding: 15px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            background-color: #007bff;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .page-content {
            padding: 20px;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="sidebar">
        <div class="user-info">
            <div class="user-avatar">{{ userInfo.initials }}</div>
            <div>
                <h5 class="mb-0">{{ userInfo.name }}</h5>
                <small>{{ userInfo.role }}</small>
            </div>
        </div>
        <ul class="nav flex-column mt-4">
            <li class="nav-item">
                <a class="nav-link active" href="#" @click="showDashboard">主页</a>
            </li>
            <li class="nav-item" v-if="userInfo.role !== 'admin'">
                <a class="nav-link" href="#" @click="showCourses">课程管理</a>
            </li>
            <li class="nav-item" v-if="userInfo.role === 'student'">
                <a class="nav-link" href="#" @click="showCourseSelection">选课管理</a>
            </li>
            <li class="nav-item" v-if="userInfo.role !== 'admin'">
                <a class="nav-link" href="#" @click="showGrades">成绩管理</a>
            </li>
            <li class="nav-item" v-if="userInfo.role === 'admin'">
                <a class="nav-link" href="#" @click="showUsers">用户管理</a>
            </li>
            <li class="nav-item" v-if="userInfo.role === 'admin'">
                <a class="nav-link" href="#" @click="showAllCourses">所有课程管理</a>
            </li>
            <li class="nav-item" v-if="userInfo.role === 'admin'">
                <a class="nav-link" href="#" @click="showAllGrades">所有成绩管理</a>
            </li>
            <li class="nav-item mt-4">
                <a class="nav-link text-danger" href="#" @click="logout">退出登录</a>
            </li>
        </ul>
    </div>

    <div class="main-content">
        <!-- 主页内容 -->
        <div id="dashboard" class="page-content">
            <h2>欢迎，{{ userInfo.name }}</h2>
            <div class="row mt-4">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <h5 class="card-title">我的课程</h5>
                            <p class="card-text">查看和管理您的课程</p>
                            <a href="#" class="btn btn-primary" @click="showCourses">进入</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4" v-if="userInfo.role === 'student'">
                    <div class="card">
                        <div class="card-body text-center">
                            <h5 class="card-title">选课管理</h5>
                            <p class="card-text">选择和管理您的课程</p>
                            <a href="#" class="btn btn-primary" @click="showCourseSelection">进入</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-body text-center">
                            <h5 class="card-title">成绩管理</h5>
                            <p class="card-text">查看和管理您的成绩</p>
                            <a href="#" class="btn btn-primary" @click="showGrades">进入</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 课程管理界面 -->
        <div id="courses" class="page-content hidden">
            <h2>课程管理</h2>
            <div class="card mt-4">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h5>课程列表</h5>
                        </div>
                        <div class="col-md-6 text-end">
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCourseModal">添加课程</button>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>课程ID</th>
                            <th>课程名称</th>
                            <th>学分</th>
                            <th>学期</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="course in courses">
                            <td>{{ course.courseId }}</td>
                            <td>{{ course.courseName }}</td>
                            <td>{{ course.credits }}</td>
                            <td>{{ course.semester }}</td>
                            <td>
                                <button class="btn btn-sm btn-primary me-2" @click="viewCourseDetails(course)">详情</button>
                                <button class="btn btn-sm btn-outline-primary" @click="editCourse(course)">编辑</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 选课管理界面 -->
        <div id="courseSelection" class="page-content hidden">
            <h2>选课管理</h2>
            <div class="card mt-4">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>可选课程</h5>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>课程ID</th>
                                    <th>课程名称</th>
                                    <th>学分</th>
                                    <th>学期</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="course in availableCourses">
                                    <td>{{ course.courseId }}</td>
                                    <td>{{ course.courseName }}</td>
                                    <td>{{ course.credits }}</td>
                                    <td>{{ course.semester }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-success" @click="selectCourse(course.courseId)">选课</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h5>已选课程</h5>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>课程ID</th>
                                    <th>课程名称</th>
                                    <th>学分</th>
                                    <th>学期</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="course in selectedCourses">
                                    <td>{{ course.courseId }}</td>
                                    <td>{{ course.courseName }}</td>
                                    <td>{{ course.credits }}</td>
                                    <td>{{ course.semester }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-danger" @click="dropCourse(course.courseId)">退选</button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成绩管理界面 -->
        <div id="grades" class="page-content hidden">
            <h2>成绩管理</h2>
            <div class="card mt-4">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h5>成绩列表</h5>
                        </div>
                        <div class="col-md-6 text-end">
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addGradeModal">添加成绩</button>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>课程ID</th>
                            <th>课程名称</th>
                            <th>学分</th>
                            <th>成绩</th>
                            <th>考试类型</th>
                            <th>考试日期</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="grade in grades">
                            <td>{{ grade.courseId }}</td>
                            <td>{{ grade.courseName }}</td>
                            <td>{{ grade.credits }}</td>
                            <td>{{ grade.score }}</td>
                            <td>{{ grade.examType }}</td>
                            <td>{{ grade.examDate }}</td>
                            <td>
                                <button class="btn btn-sm btn-primary me-2" @click="editGrade(grade)">编辑</button>
                                <button class="btn btn-sm btn-outline-danger" @click="deleteGrade(grade.id)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 用户管理界面 -->
        <div id="users" class="page-content hidden">
            <h2>用户管理</h2>
            <div class="card mt-4">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h5>用户列表</h5>
                        </div>
                        <div class="col-md-6 text-end">
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">添加用户</button>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>用户ID</th>
                            <th>用户名</th>
                            <th>姓名</th>
                            <th>角色</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="user in users">
                            <td>{{ user.userId }}</td>
                            <td>{{ user.username }}</td>
                            <td>{{ user.name }}</td>
                            <td>{{ user.role }}</td>
                            <td>
                                <button class="btn btn-sm btn-primary me-2" @click="editUser(user)">编辑</button>
                                <button class="btn btn-sm btn-outline-danger" @click="deleteUser(user.userId)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 所有课程管理界面 -->
        <div id="allCourses" class="page-content hidden">
            <h2>所有课程管理</h2>
            <div class="card mt-4">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h5>课程列表</h5>
                        </div>
                        <div class="col-md-6 text-end">
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCourseModal">添加课程</button>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>课程ID</th>
                            <th>课程名称</th>
                            <th>学分</th>
                            <th>学期</th>
                            <th>开课年份</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="course in allCourses">
                            <td>{{ course.courseId }}</td>
                            <td>{{ course.courseName }}</td>
                            <td>{{ course.credits }}</td>
                            <td>{{ course.semester }}</td>
                            <td>{{ course.academicYear }}</td>
                            <td>
                                <button class="btn btn-sm btn-primary me-2" @click="editCourse(course)">编辑</button>
                                <button class="btn btn-sm btn-outline-danger" @click="deleteCourse(course.courseId)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 所有成绩管理界面 -->
        <div id="allGrades" class="page-content hidden">
            <h2>所有成绩管理</h2>
            <div class="card mt-4">
                <div class="card-body">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <h5>成绩列表</h5>
                        </div>
                        <div class="col-md-6 text-end">
                            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addGradeModal">添加成绩</button>
                        </div>
                    </div>
                    <table class="table">
                        <thead>
                        <tr>
                            <th>学生成绩ID</th>
                            <th>学生姓名</th>
                            <th>课程名称</th>
                            <th>学分</th>
                            <th>成绩</th>
                            <th>考试类型</th>
                            <th>考试日期</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="grade in allGrades">
                            <td>{{ grade.gradeId }}</td>
                            <td>{{ grade.studentName }}</td>
                            <td>{{ grade.courseName }}</td>
                            <td>{{ grade.credits }}</td>
                            <td>{{ grade.score }}</td>
                            <td>{{ grade.examType }}</td>
                            <td>{{ grade.examDate }}</td>
                            <td>
                                <button class="btn btn-sm btn-primary me-2" @click="editGrade(grade)">编辑</button>
                                <button class="btn btn-sm btn-outline-danger" @click="deleteGrade(grade.gradeId)">删除</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加课程模态框 -->
    <div class="modal fade" id="addCourseModal" tabindex="-1" aria-labelledby="addCourseModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCourseModalLabel">添加课程</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addCourseForm">
                        <div class="mb-3">
                            <label for="courseName" class="form-label">课程名称</label>
                            <input type="text" class="form-control" id="courseName" required>
                        </div>
                        <div class="mb-3">
                            <label for="courseCredits" class="form-label">学分</label>
                            <input type="number" class="form-control" id="courseCredits" required>
                        </div>
                        <div class="mb-3">
                            <label for="courseSemester" class="form-label">学期</label>
                            <input type="text" class="form-control" id="courseSemester" required>
                        </div>
                        <div class="mb-3">
                            <label for="courseYear" class="form-label">开课年份</label>
                            <input type="text" class="form-control" id="courseYear" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="addCourse">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加用户模态框 -->
    <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addUserModalLabel">添加用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addUserForm">
                        <div class="mb-3">
                            <label for="username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="username" required>
                        </div>
                        <div class="mb-3">
                            <label for="password" class="form-label">密码</label>
                            <input type="password" class="form-control" id="password" required>
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="userRole" class="form-label">角色</label>
                            <select class="form-select" id="userRole" required>
                                <option value="student">学生</option>
                                <option value="teacher">教师</option>
                                <option value="admin">管理员</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="addUser">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加成绩模态框 -->
    <div class="modal fade" id="addGradeModal" tabindex="-1" aria-labelledby="addGradeModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addGradeModalLabel">添加成绩</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="addGradeForm">
                        <div class="mb-3">
                            <label for="studentId" class="form-label">学生ID</label>
                            <input type="number" class="form-control" id="studentId" required>
                        </div>
                        <div class="mb-3">
                            <label for="courseId" class="form-label">课程ID</label>
                            <input type="number" class="form-control" id="courseId" required>
                        </div>
                        <div class="mb-3">
                            <label for="score" class="form-label">成绩</label>
                            <input type="number" class="form-control" id="score" required>
                        </div>
                        <div class="mb-3">
                            <label for="examType" class="form-label">考试类型</label>
                            <select class="form-select" id="examType" required>
                                <option value="midterm">期中</option>
                                <option value="final">期末</option>
                                <option value="quiz">小测验</option>
                                <option value="assignment">作业</option>
                                <option value="project">项目</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="examDate" class="form-label">考试日期</label>
                            <input type="date" class="form-control" id="examDate" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="addGrade">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    const app = Vue.createApp({
        data() {
            return {
                currentView: 'dashboard',
                userInfo: {
                    name: '张三',
                    role: new URLSearchParams(window.location.search).get('role') || 'student',
                    username: new URLSearchParams(window.location.search).get('username') || 'user123'
                },
                courses: [
                    { courseId: 1, courseName: '高等数学', credits: 4, semester: '2023-2024-1', academicYear: '2023' },
                    { courseId: 2, courseName: '大学英语', credits: 3, semester: '2023-2024-1', academicYear: '2023' },
                    { courseId: 3, courseName: '计算机基础', credits: 3, semester: '2023-2024-1', academicYear: '2023' }
                ],
                availableCourses: [
                    { courseId: 4, courseName: '数据结构', credits: 4, semester: '2023-2024-2', academicYear: '2023' },
                    { courseId: 5, courseName: '操作系统', credits: 4, semester: '2023-2024-2', academicYear: '2023' }
                ],
                selectedCourses: [
                    { courseId: 1, courseName: '高等数学', credits: 4, semester: '2023-2024-1', academicYear: '2023' },
                    { courseId: 2, courseName: '大学英语', credits: 3, semester: '2023-2024-1', academicYear: '2023' }
                ],
                grades: [
                    { id: 1, courseId: 1, courseName: '高等数学', credits: 4, score: 90, examType: '期末', examDate: '2024-01-15' },
                    { id: 2, courseId: 2, courseName: '大学英语', credits: 3, score: 85, examType: '期末', examDate: '2024-01-16' }
                ],
                users: [
                    { userId: 1, username: 'admin', name: '管理员', role: 'admin' },
                    { userId: 2, username: 'teacher1', name: '李老师', role: 'teacher' },
                    { userId: 3, username: 'student1', name: '张三', role: 'student' }
                ],
                allCourses: [
                    { courseId: 1, courseName: '高等数学', credits: 4, semester: '2023-2024-1', academicYear: '2023' },
                    { courseId: 2, courseName: '大学英语', credits: 3, semester: '2023-2024-1', academicYear: '2023' },
                    { courseId: 3, courseName: '计算机基础', credits: 3, semester: '2023-2024-1', academicYear: '2023' },
                    { courseId: 4, courseName: '数据结构', credits: 4, semester: '2023-2024-2', academicYear: '2023' },
                    { courseId: 5, courseName: '操作系统', credits: 4, semester: '2023-2024-2', academicYear: '2023' }
                ],
                allGrades: [
                    { gradeId: 1, studentId: 3, studentName: '张三', courseId: 1, courseName: '高等数学', credits: 4, score: 90, examType: '期末', examDate: '2024-01-15' },
                    { gradeId: 2, studentId: 3, studentName: '张三', courseId: 2, courseName: '大学英语', credits: 3, score: 85, examType: '期末', examDate: '2024-01-16' },
                    { gradeId: 3, studentId: 4, studentName: '李四', courseId: 1, courseName: '高等数学', credits: 4, score: 88, examType: '期末', examDate: '2024-01-15' }
                ]
            };
        },
        computed: {
            // 计算用户头像首字母
            userInfoInitials() {
                if (!this.userInfo.name) return '';
                const names = this.userInfo.name.split(' ');
                return names.map(name => name[0].toUpperCase()).join('');
            }
        },
        methods: {
            // 显示主页
            showDashboard() {
                this.hideAllViews();
                document.getElementById('dashboard').classList.remove('hidden');
                this.currentView = 'dashboard';
            },
            // 显示课程管理界面
            showCourses() {
                this.hideAllViews();
                document.getElementById('courses').classList.remove('hidden');
                this.currentView = 'courses';
            },
            // 显示选课管理界面
            showCourseSelection() {
                this.hideAllViews();
                document.getElementById('courseSelection').classList.remove('hidden');
                this.currentView = 'courseSelection';
            },
            // 显示成绩管理界面
            showGrades() {
                this.hideAllViews();
                document.getElementById('grades').classList.remove('hidden');
                this.currentView = 'grades';
            },
            // 显示用户管理界面
            showUsers() {
                this.hideAllViews();
                document.getElementById('users').classList.remove('hidden');
                this.currentView = 'users';
            },
            // 显示所有课程管理界面
            showAllCourses() {
                this.hideAllViews();
                document.getElementById('allCourses').classList.remove('hidden');
                this.currentView = 'allCourses';
            },
            // 显示所有成绩管理界面
            showAllGrades() {
                this.hideAllViews();
                document.getElementById('allGrades').classList.remove('hidden');
                this.currentView = 'allGrades';
            },
            // 隐藏所有视图
            hideAllViews() {
                const views = ['dashboard', 'courses', 'courseSelection', 'grades', 'users', 'allCourses', 'allGrades'];
                views.forEach(view => {
                    const element = document.getElementById(view);
                    if (element) {
                        element.classList.add('hidden');
                    }
                });
            },
            // 选课
            selectCourse(courseId) {
                const course = this.availableCourses.find(c => c.courseId === courseId);
                if (course) {
                    this.selectedCourses.push(course);
                    this.availableCourses = this.availableCourses.filter(c => c.courseId !== courseId);
                    alert(`成功选择课程: ${course.courseName}`);
                }
            },
            // 退选课程
            dropCourse(courseId) {
                const course = this.selectedCourses.find(c => c.courseId === courseId);
                if (course) {
                    this.availableCourses.push(course);
                    this.selectedCourses = this.selectedCourses.filter(c => c.courseId !== courseId);
                    alert(`成功退选课程: ${course.courseName}`);
                }
            },
            // 查看课程详情
            viewCourseDetails(course) {
                alert(`课程ID: ${course.courseId}\n课程名称: ${course.courseName}\n学分: ${course.credits}\n学期: ${course.semester}\n开课年份: ${course.academicYear}`);
            },
            // 编辑课程
            editCourse(course) {
                alert(`编辑课程: ${course.courseName}`);
                // 实际应用中，这里应该打开一个模态框来编辑课程信息
            },
            // 删除课程
            deleteCourse(courseId) {
                if (confirm('确定要删除该课程吗?')) {
                    this.allCourses = this.allCourses.filter(c => c.courseId !== courseId);
                    alert('课程已删除');
                }
            },
            // 添加课程
            addCourse() {
                const courseName = document.getElementById('courseName').value;
                const courseCredits = parseInt(document.getElementById('courseCredits').value);
                const courseSemester = document.getElementById('courseSemester').value;
                const courseYear = document.getElementById('courseYear').value;

                const newCourse = {
                    courseId: this.allCourses.length + 1,
                    courseName,
                    credits: courseCredits,
                    semester: courseSemester,
                    academicYear: courseYear
                };

                this.allCourses.push(newCourse);
                document.getElementById('addCourseForm').reset();
                bootstrap.Modal.getInstance(document.getElementById('addCourseModal')).hide();
                alert('课程添加成功');
            },
            // 编辑用户
            editUser(user) {
                alert(`编辑用户: ${user.name}`);
                // 实际应用中，这里应该打开一个模态框来编辑用户信息
            },
            // 删除用户
            deleteUser(userId) {
                if (confirm('确定要删除该用户吗?')) {
                    this.users = this.users.filter(u => u.userId !== userId);
                    alert('用户已删除');
                }
            },
            // 添加用户
            addUser() {
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                const name = document.getElementById('name').value;
                const role = document.getElementById('userRole').value;

                const newUser = {
                    userId: this.users.length + 1,
                    username,
                    name,
                    role
                };

                this.users.push(newUser);
                document.getElementById('addUserForm').reset();
                bootstrap.Modal.getInstance(document.getElementById('addUserModal')).hide();
                alert('用户添加成功');
            },
            // 编辑成绩
            editGrade(grade) {
                alert(`编辑成绩: ${grade.courseName}`);
                // 实际应用中，这里应该打开一个模态框来编辑成绩信息
            },
            // 删除成绩
            deleteGrade(gradeId) {
                if (confirm('确定要删除该成绩吗?')) {
                    this.grades = this.grades.filter(g => g.id !== gradeId);
                    this.allGrades = this.allGrades.filter(g => g.gradeId !== gradeId);
                    alert('成绩已删除');
                }
            },
            // 添加成绩
            addGrade() {
                const studentId = parseInt(document.getElementById('studentId').value);
                const courseId = parseInt(document.getElementById('courseId').value);
                const score = parseInt(document.getElementById('score').value);
                const examType = document.getElementById('examType').value;
                const examDate = document.getElementById('examDate').value;

                const newGrade = {
                    id: this.grades.length + 1,
                    courseId,
                    courseName: this.allCourses.find(c => c.courseId === courseId)?.courseName || '未知课程',
                    credits: this.allCourses.find(c => c.courseId === courseId)?.credits || 0,
                    score,
                    examType,
                    examDate
                };

                this.grades.push(newGrade);

                const newAllGrade = {
                    gradeId: this.allGrades.length + 1,
                    studentId,
                    studentName: this.users.find(u => u.userId === studentId)?.name || '未知学生',
                    courseId,
                    courseName: this.allCourses.find(c => c.courseId === courseId)?.courseName || '未知课程',
                    credits: this.allCourses.find(c => c.courseId === courseId)?.credits || 0,
                    score,
                    examType,
                    examDate
                };

                this.allGrades.push(newAllGrade);
                document.getElementById('addGradeForm').reset();
                bootstrap.Modal.getInstance(document.getElementById('addGradeModal')).hide();
                alert('成绩添加成功');
            },
            // 退出登录
            logout() {
                window.location.href = 'login.html';
            }
        },
        created() {
            // 初始化用户信息
            this.userInfo.initials = this.userInfoInitials;
        },
        mounted() {
            // 显示主页
            this.showDashboard();
        }
    });

    app.mount('#app');
</script>
</body>
</html>